<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div ID="APP">
        <!-- <p>{{obj.name}}</p>
        <p>{{obj.age>30?"HELLO":"WORLD"}}</p>
        <p>{{obj.age+1}}</p>
        <p>{{fn()}}</p>
        <p>{{msg.split(' ').length}}</p> -->
        <!-- <p>{{obj.name}}</p>
        <p>{{obj.age}}</p>
        <p>{{obj.school}}</p>
        <p>{{idea}}</p> -->
        <!-- <p>{{obj.name}}</p>
        <p>{{obj.age}}</p>
        <p>{{obj.school}}</p>
        <button @click="FUNC">修改数据</button> -->
        <!-- <p>{{OBJ.NAME}}</p>
        <p>{{OBJ.NUM}}</p>
        <p>{{OBJ.SCHOOL}}</p>
        <button @click="FUNC">点我修改数据</button> -->
        <!-- <p>{{message1.NAME}}</p>
        <p>{{message1.SCHOOL}}</p>
        <p>{{message1.NUM}}</p>
        <p>{{message2}}</p> -->
        <p>{{message3.NAME}}</p>
        <p>{{message3.SCHOOL}}</p>
        <p>{{message3.NUM}}</p>
        <button @click="FUNC()">点我修改数据</button>
    </div>
    <script>
        let {createApp,reactive,ref}=Vue
        Vue.createApp({
            setup() {
                // let message1=reactive({
                //     NAME:"GANCHUHAO",
                //     SCHOOL:"JXZYYDX",
                //     NUM:"202301014069"
                // })
                // let message2=reactive(90)
                let message3=ref({
                    NAME:"LIUYUXING",
                    NUM:"202301014098",
                    SCHOOL:"JXZYYDX"
                })
                function FUNC(){
                    message3.value.NAME="GANCHUHAO"
                    message3.value.NUM="202301014069"
                    message3.value.SCHOOL="JXZYYDX"
                }
                return{message3,FUNC}
            }
        }).mount('#APP')
        
        // let{reactive}=Vue
        // Vue.createApp({
        //     setup()
        //     {
        //         let OBJ=reactive({
        //             NAME:"GANCHUHAO",
        //             NUM:"202301014069",
        //             SCHOOL:"JXZYYDX"
        //         })
        //         let FUNC=()=>{
        //             OBJ.NAME="LIUYUXING"
        //             OBJ.NUM="202301014078"
        //             OBJ.SCHOOL="JXLGDX"
        //         }
        //         return {OBJ,FUNC}
        //     }
        // }).mount('#APP')
        // let{ref}=Vue
        // Vue.createApp({
        //     setup() {
        //         let obj=ref({
        //             name:"ganchuhao",
        //             age:29,
        //             school:"jxzyydx"
        //         })
        //         function FUNC()
        //         {
        //             obj.value.name="YIQUANCHAOREN",
        //             obj.value.age=50,
        //             obj.value.school="NULL"
        //         }
        //         return {FUNC,obj}
        //     }
        // }).mount('#APP')
        // Vue.createApp({
        //     setup() {
        //         let obj={
        //             name:"ganchuhao",
        //             age:20
        //         }
        //         let msg="hello world"
        //         let Grade=60
        //         function fn()
        //         {
        //             return "ABCDEFHI"
        //         }
        //         return{obj,Grade,fn,msg}
        //     }
        // }).mount('#APP')
    </script>
</body>
</html>